<script>
export default {
    name: "S3MModel",
};
</script>
<script setup>
import { onMounted, ref, onUnmounted } from "vue";


const cesiumContainer = ref(null);
let viewer = null;

/**
 *  Cesium 使用原生全局导入
 */
const initCesium = () => {
    // 确保 DOM 容器已渲染
    if (cesiumContainer.value) {
        // 初始化 SuperMap iClient3D for Cesium 查看器

        viewer =
            new Cesium.Viewer(cesiumContainer.value, {
                baseLayerPicker: false,
                geocoder: false,
                homeButton: false,
                infoBox: false,
                sceneModePicker: false,
                selectionIndicator: false,
                timeline: false,
                navigationHelpButton: false,
            });



        // 加载 S3M
        const scene = viewer.scene;
        try {
            scene.open(iserverOrigin + "/iserver/services/3D-local3DCache-SuZhouBeiZhan4326/rest/realspace").then((layer) => {
                window._viewer = viewer;
                layer = layer[0]
                layer.style3D.bottomAltitude = -190;
            })
        } catch (e) {
        }



    }
};

onMounted(() => {
    initCesium();
});

onUnmounted(() => {
    // 清理资源
    if (viewer) {
        viewer.destroy();
        viewer = null;
    }
});
</script>

<template>
    <div class="cesium-container" ref="cesiumContainer"></div>
</template>

<style scoped lang="less">
.cesium-container {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
}

:deep(.cesium-viewer-bottom) {
  display: none !important;
}
</style>
